<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LAKK项目</title>
    <style>
      #qianru {
        background-color: #f0f0f0;
        color: black;
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      iframe {
        width: 100%;
        height: 500px;
        border: none;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app" ></div>
    <div id="qianru">
      <iframe id="iframe" src="https://windbless.top/ceshi/index.html" allow="camera; microphone"></iframe>
  </div>
    <script type="module" src="/src/main.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const checkRoomId = () => {
          const roomid = sessionStorage.getItem('roomid');
          console.log("监听房间链接中: " + roomid);

          if (roomid && roomid !== 'null') {
            const qianruDiv = document.getElementById('qianru');
            
            if (!qianruDiv.querySelector('h4')) {
              const h4 = document.createElement('h4');
              h4.textContent = "语音房间编号：" + roomid;
              qianruDiv.appendChild(h4);
            //   alert("链接已建立");

              const iframe = document.getElementById('iframe');
              iframe.src = `https://cloud.windbless.top/#/multiple?channelName=${roomid}`;
            }

            // sessionStorage.removeItem('roomid');
            clearInterval(intervalId);
          }
        };

        const intervalId = setInterval(checkRoomId, 1000);
      });
    </script>
  </body>
</html>
